<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/vue.js"></script>
    <title>姓名watch语法实现</title>
</head>
<body>
    <div id="root">
        <!-- 
        条件渲染:
            1:v-if
            写法:
                1. v-if="条件表达式"
                2. v-else-if="条件表达式"
                3. v-else
                4. template v-if="条件表达式"
                适用于:切换频率较低的场景
                特点:不展示DOM元素，直接被移除
                注意:v-if可以和v-else-if/v-else搭配使用，但眼球结构不能被打断
            2:v-show
            写法:
                v-show="条件表达式"
                适用于:切换频率较高的场景
                特点:展示DOM元素，但不渲染内容，仅仅是切换显示与否
            3.备注:使用v-if是，元素可能无法获取到，而使用v-show一定可以获取到
        -->
        <!-- 使用v-show指令实现条件渲染 -->
        <!-- <h1 v-show='false'>欢迎来到{{name}}</h1> -->
        <!-- 可是使用表达式来做条件渲染 -->
        <!-- <h1 v-show='1===1'>欢迎来到{{name}}</h1> -->
        <!-- 使用v-if指令实现条件渲染,如果为false，则dom元素都没有 -->
        <!-- <h1 v-if='false'>欢迎来到{{name}}</h1> -->
        <h1>当前的n值是:{{n}}</h1>
        <button @click="n++">点击一下</button>

        <!-- <div v-show="n === 1">Angular</div>
        <div v-show="n === 2">React</div>
        <div v-show="n === 3">Vue</div> -->
        
        <!-- v-if 使用的时候不能打断，否则控制台报错 -->
        <!-- <div>@</div> -->
        <div v-if="n === 1">Angular</div>
        <div v-else-if="n === 2">React</div>
        <div v-else-if="n === 3">Vue</div>
        <div v-else>Hello World</div>

        <template v-if="n === 4">
            <h1>你好</h1>
            <h1>尚硅谷</h1>
            <h1>北京</h1>
        </template>
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#root',
        data: {
            name: '尚硅谷',
            n: 0
        }
    })          
</script>
</html>